Estoy haciendo una pequeña configuración de prueba para mecanografiado. Mi objetivo principal es agrupar todos los módulos .ts en un único archivo .js al que se puede hacer referencia en el lado del cliente en un index.html simple. Este es mi módulo de prueba:
// index.ts import { Example } from './example' class x { example(): void { console.log(Example) } } let test = new x() test.example() // example.ts export const Example : string = 'Example Message' Compilo todo en un archivo bundle.js usando Webpack 5 y ts-loader. Luego, creé un archivo .html para probar la clase creada. Allí, el test.example() dentro index.ts (y luego bundle.js ) se ejecutó correctamente, pero el segundo, dentro de <script/> informa Uncaught ReferenceError: x is not defined .
<!-- index.html --> <html> <script src="../dist/js/bundle.js"></script> <script> // Uncaught ReferenceError: x is not defined let test = new x() test.example() </script> </html> ¿Cómo puedo hacer referencia a mi clase x desde el segundo <script/> ?
¿Cómo puedo hacer referencia a mi clase x desde el segundo
<script/>?
no puedes Al menos no sin modificar la estructura de su código fuente.
Un empaquetador pone todo su código ejecutable en el paquete. Eso incluye sus dependencias y el código de su aplicación. Y todo eso solo está realmente diseñado para funcionar desde ese paquete a través de las palabras clave de import y export .
El paquete gestiona esas importaciones/exportaciones de una manera que no contamina el alcance global. Pero sí requiere que te quedes dentro de ese paquete.
Sin embargo, parece que desea que su paquete haga que algunos valores estén disponibles en ese ámbito global. Y para hacer eso, debes ser explícito al respecto.
class x { example(): void { console.log(Example) } } // Add `x` to the browser's global scope. window.x = x Ahora, desde alguna otra etiqueta <script> , la new x() debería funcionar como espera.